<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
  <script src="vue.js"></script>
</head>
<body>
<!--
    事件的基本使用：
      1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
      2.事件的回调需要配置在methods中，最终在vm上
      3.methods中配置的函数，不要用箭头函数，否则this就不是vm了
      4.methods中配置的函数，都是被Vue所管理的函数，this的指向为vm或组件实例对象
      5.@onclick=’demo‘ 和 @click=’demo($event)效果一直，但后者可以传参‘

-->
<div id='root'>
  <h2 >welcome to {{address}}</h2>
  <button v-on:click="showInfo">click me</button>
  <button @click="showInfo">click me</button>
</div>
</body>

<script  type="text/javascript">
  Vue.config.productionTip = false;

  const vm = new Vue({
    el:'#root',
    data:{
      name:'王凯',
      address:'铁建广场'
    },
    methods:{
      showInfo() {
    alert("thank you")
  }
    }
  })

</script>
</html>